<!--继承布局文件-->
{extend name="index@layout/page"}

<!--子页面css-->
{block name="page-css"}

{/block}

<!--子页面HTML-->
{block name="page-html"}
<div style="margin-left:20px">
    <div style="display: block;overflow-y: hidden;">
        <div class="cus_price_top search-box">
            <form class="form-inline layui-form" id="condition" method="post" role="search">
                <div class="layui-inline">
                    <label class="layui-form-label">
                        下发时间
                    </label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" id="time" lay-verify="date" name="time"
                               placeholder="下发时间" type="text">
                        </input>
                    </div>
                </div>
            </form>
        </div>
        <div class="search-box">
            <div class="layui-inline" style="width: 49%">
                <div class="layui-card">
                    <div class="layui-card-header"><h3>用户趋势</h3></div>
                    <div class="layui-card-body">
                        <p><span class="font-18">今日邀请 <b>{$data['today_user']}</b> 人</span></p>
                        <br>
                        <p><span class="font-18">有效邀请 <b>{$data['today_active_user']}</b> 人</span></p>
                        <br>
                        <p><span class="font-18">在线用户 <b>{$data['today_online_user']}</b> 人</span></p>
                        <br>
                    </div>
                </div>
            </div>
            <div class="layui-inline" style="width: 49%">
                <div class="layui-card">
                    <div class="layui-card-header"><h3>今日流水</h3></div>
                    <div class="layui-card-body">
                        <p><span class="font-18">今日流水 <b>{$data['today_money']}</b> 元</span></p>
                        <p><span class="font-18">广告收入 <b>{$data['today_ad_money']}</b> 元</span></p>
                        <p><span class="font-18">积分收入 <b>{$data['today_gold_money']}</b> 元</span></p>
                        <p><span class="font-18">会员收入 <b>{$data['today_vip_money']}</b> 元</span></p>
                        <p><span class="font-18">代理收入 <b>{$data['today_partner_money']}</b> 元</span></p>
                        <p><span class="font-18">提现支出 <b>{$data['today_cashout_money']}</b> 元</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-box ">
            <div class="table-info" id="listMain1" style="margin-top: 5px;height: 500px">

            </div>

        </div>
        <div class="search-box ">
        <div class="table-info" id="listMain2" style="margin-top: 5px;height: 500px">

        </div>
        </div>
    </div>


</div>
{/block}
<!--子页面JS部分-->
{block name="page-script"}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js" type="text/javascript"></script>

<script>
    var page = new pageloading();
    $(function () {
        init();
       // dgFun();
    });

    function init() {
        baskInfo();
        page.layuiClick();
    }

    /*基本操作信息*/
    function baskInfo() {
        page.dgHeightFun(); //列表自适应

        layuiInfo.laydate.render({
            elem: '#time',
            type: 'date'
        });
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('listMain1'));

    $.post("{:url('getUserTrendData')}").done(function (data) {
        myChart1.setOption({
            title: {
                text: '用户趋势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['今日新增', '在线用户']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.data['date']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '今日新增',
                    type: 'line',
                    stack: '总量',
                    data: data.data['user_num']
                },
                {
                    name: '在线用户',
                    type: 'line',
                    stack: '总量',
                    data: data.data['online_num']
                },
            ]
        });
    });

    // 基于准备好的dom，初始化echarts实例
    var myChart2 = echarts.init(document.getElementById('listMain2'));

    $.post("{:url('getOrderTrendData')}").done(function (data) {
        myChart2.setOption({
            title: {
                text: '付款趋势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['付款']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: data.data['date']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '付款',
                    type: 'line',
                    stack: '总量',
                    data: data.data['pay_count']
                },
            ]
        });
    });


</script>
{/block}
